<template>
  <div class="notify-panel">
    <div class="notify-panel-header">
      <h3>消息通知</h3>
      <button class="readall-btn" @click="markAllRead" :disabled="!unreadCount">全部标为已读</button>
    </div>
    <table class="notify-table">
      <thead>
        <tr>
          <th>类型</th>
          <th>内容</th>
          <th>时间</th>
          <th>状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in notifications" :key="item.id">
          <td>{{ item.type }}</td>
          <td>{{ item.content }}</td>
          <td>{{ item.time }}</td>
          <td>
            <span :class="['status', item.read ? 'read' : 'unread']">{{ item.read ? '已读' : '未读' }}</span>
          </td>
          <td>
            <button v-if="!item.read" class="mark-btn" @click="markRead(item.id)">标为已读</button>
            <button class="delete-btn" @click="remove(item.id)">删除</button>
          </td>
        </tr>
        <tr v-if="!notifications.length">
          <td colspan="5" style="text-align:center;color:#aaa;">暂无通知</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const notifications = ref([
  { id: 1, type: '系统', content: '欢迎登录后台管理系统！', time: '2025-07-01 09:00', read: false },
  { id: 2, type: '安全', content: '您的密码已修改。', time: '2025-07-01 10:00', read: true },
  { id: 3, type: '内容', content: '有新内容待审核。', time: '2025-07-02 08:30', read: false },
  { id: 4, type: '系统', content: '系统将于本周末维护。', time: '2025-07-02 09:00', read: false },
]);

const unreadCount = computed(() => notifications.value.filter(n => !n.read).length);

function markRead(id) {
  const n = notifications.value.find(n => n.id === id);
  if (n) n.read = true;
}
function markAllRead() {
  notifications.value.forEach(n => n.read = true);
}
function remove(id) {
  notifications.value = notifications.value.filter(n => n.id !== id);
}
</script>

<style scoped>
.notify-panel {
  width: 100%;
}
.notify-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.readall-btn {
  background: #1976d2;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 18px;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.2s;
}
.readall-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.readall-btn:hover:enabled {
  background: #1256a3;
}
.notify-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.notify-table th, .notify-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}
.notify-table th {
  background: #f4f6fa;
  color: #555;
}
.status.unread {
  color: #f44336;
  font-weight: bold;
}
.status.read {
  color: #43a047;
}
.mark-btn, .delete-btn {
  background: none;
  border: none;
  color: #1976d2;
  cursor: pointer;
  margin-right: 8px;
  font-size: 14px;
}
.delete-btn {
  color: #f44336;
}
.mark-btn:hover, .delete-btn:hover {
  text-decoration: underline;
}
</style>
